<template>
    <el-dialog :title="form.id? $t('common.editBtn'):$t('common.addBtn')" :close-on-click-modal="false" width="600"
        draggable v-model="visible">
        <el-form :model="form" ref="formRef" label-width="100px" :rules="dataRules" v-loading="loading">
            <el-form-item :label="$t('aigcProviderModel.provider')" prop="provider">
                <el-select v-model="form.provider" :placeholder="t('aigcProviderModel.inputProviderTip')" clearable>
                    <el-option v-for="(item,index) in LLM_PROVIDER" :key="index" :value="item.value" :label="item.label"/>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('aigcProviderModel.modelType')" prop="modelType">
                <el-select v-model="form.modelType" :placeholder="$t('aigcProviderModel.inputModelTypeTip')" clearable>
                    <el-option :key="index" :label="item.label" :value="item.value" v-for="(item, index) in LLM_MODEL_TYPE"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('aigcProviderModel.modelName')" prop="modelName">
                <el-input v-model="form.modelName" :placeholder="$t('aigcProviderModel.inputModelNameTip')" clearable ></el-input>
            </el-form-item>
            <el-form-item :label="$t('aigcProviderModel.remark')" prop="remark">
                <el-input type="textarea" :rows="5" v-model="form.remark" :placeholder="t('aigcProviderModel.inputRemarkTip')" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false">{{$t('common.cancelButtonText')}}</el-button>
            <el-button @click="onSubmit" type="primary" :disabled="loading">{{$t('common.confirmButtonText')}}</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="aigcProviderModelDialog">
import {rule} from '/@/utils/validate';
import {useMessage} from '/@/hooks/message';
import {addObj,putObj,getObj} from '/@/api/aigc/providerModel';
import {useI18n} from 'vue-i18n';
import {useDict} from "/@/hooks/dict";

    const {LLM_MODEL_TYPE,LLM_PROVIDER} = useDict('LLM_MODEL_TYPE','LLM_PROVIDER');
    const {t} = useI18n();
    // 定义变量内容
    const formRef = ref();
    const visible = ref(false);
    const loading = ref(false);

    const emit = defineEmits(['refresh']);
    // 提交表单数据
    const form = reactive({
        id:'',
        modelType:'',
        modelName:'',
        provider:'',
        remark:'',
    });
    //规则校验
    const dataRules = reactive({
        modelType:[{required:true,message:'模型类型不能为空',trigger:'change'}],
        modelName:[
            {required:true,message:'模型名称不能为空',trigger:'blur'},
        ],
        provider:[
            {required:true,message:'供应商不能为空',trigger:'blur'}
            ],
    });

    //打开对话框
    const openDialog= (id?:string) => {
        visible.value = true;
        form.id='';
        nextTick(()=>{
            formRef.value.resetFields();
        });

        if(id){
           form.id=id;
           getData(id);
        }
    };
    //获取数据详情
    const getData = (id:string) => {
        getObj(id).then((res:any)=>{
            Object.assign(form,res.data);
        });
    };

    //提交表单数据
    const onSubmit = async () => {
        const valid = await formRef.value.validate();
        if(!valid){
            return false;
        }
        try{
            loading.value=true;
            form.id?await putObj(form):await addObj(form);
            useMessage().success(form.id?t('common.editSuccessText'):t('common.addSuccessText'));
            visible.value = false;
            emit('refresh');
        }catch (e) {
            useMessage().error(e.msg);
        }finally {
            loading.value=false;
        }
    };
    //对外暴露方法
    defineExpose({
        openDialog,
    });
</script>